<template>
    <div class="addContent worksTopConent">
        <div class="topBox">
            <!-- 信息填写 -->
            <div class="topContent mainContentDiv ">
                <div class="v-icon">
                    <span>基本信息</span>
                </div>
                <div class="listDown baseInfo">
                    <el-form action="" :model="form" ref="form">
                        <el-form-item label="" prop="name" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"> <i></i><span class="title">机构名称</span> </div>
                               
                                <!-- <input type="text" name="worksName" v-model="form.name" class="elInputCom" :disabled="true"> -->
                                <el-input type="text" name="worksName" v-model="form.name" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="gjs" class="worksItem" :rules="{validator:this.$common.numberValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">构件数</span></div> 
                                <el-input type="number" name="worksName" v-model="form.gjs" class="elInputCom" min="0" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <!-- <el-form-item label="" prop="cdhs" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">传动函数</span> </div>
                                <el-select class="worksAddSelect" v-model="form.cdhs" :disabled="edit">
                                    <el-option
                                    v-for="item in jigouParams"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.name">
                                    </el-option>
                                </el-select>            
                            </div>
                        </el-form-item> -->

                        <el-form-item label="" prop="jhgx" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">几何关系</span></div> 
                                <el-input type="text" name="worksName" v-model="form.jhgx" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="type" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">类型</span> </div>
                                <el-select class="worksAddSelect" v-model="form.type" :disabled="edit">
                                    <el-option
                                    v-for="item in produceType"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.name">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="ydlxs" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">运动链形式</span></div> 
                                <el-input type="text" name="worksName" v-model="form.ydlxs" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="rack" class="worksItem" :rules="{validator:this.$common.numberValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">机架</span> </div>
                                <el-input type="number" name="worksName" v-model="form.rack" class="elInputCom" min="0" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="actuator" class="worksItem" :rules="{validator:this.$common.numberValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">驱动件</span></div> 
                                <el-input type="number" name="worksName" v-model="form.actuator" min="0" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="follower" class="worksItem" :rules="{validator:this.$common.numberValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">从动件</span> </div>
                                <el-input type="number" name="worksName" v-model="form.follower" min="0" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="decorate" class="worksItem" :rules="{validator:this.$common.numberValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">布置</span> </div>
                                <el-input type="number" name="worksName" v-model="form.decorate" min="0" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="zczxdwz" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">主从轴相对位置</span></div> 
                                <el-input type="text" name="worksName" v-model="form.zczxdwz"  class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="xdcc" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">相对尺寸</span> </div>
                                <el-input type="text" name="worksName" v-model="form.xdcc" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="cdhsdfdcx" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">传动函数的非对称性</span> </div>
                                <el-input type="text" name="worksName" v-model="form.cdhsdfdcx" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="cdhsdxxbf" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">传动函数的线性部分</span> </div>
                                <el-input type="text" name="worksName" v-model="form.cdhsdxxbf" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="jsdtx" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">加速度特性</span> </div>
                                <el-input type="text" name="worksName" v-model="form.jsdtx" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="xckdx" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">行程可调性</span> </div>
                                <el-input type="text" name="worksName" v-model="form.xckdx" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="mscxdzs" class="worksItem" :rules="{validator:this.$common.numberValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="label"><i></i><span class="title">每双行程的转数</span> </div>
                                <el-input type="number" name="worksName" v-model="form.mscxdzs" min="0" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="zcdxknx" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                               <div class="label"> <i></i><span class="title">主从动件可逆性</span> </div>
                                <el-input type="text" name="worksName" v-model="form.zcdxknx" class="elInputCom" :disabled="edit"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="" prop="zcdxknx" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                        </el-form-item>

                        <el-form-item label="" prop="userName" class="worksItem" style="margin-bottom:0">
                            <div class="worksInput workImgDiv">
                               <div class="label"> <i></i><span class="title">传动函数</span> </div>
                                <div class="addImg" >
                                    <el-upload
                                        action="string"
                                        :http-request="uploadImg2"
                                        accept="image/*"
                                        list-type="picture-card"
                                        :on-preview="handlePictureCardPreview2"
                                        :on-remove="handleRemove2"
                                        :on-success="uploadSuccess2"
                                        v-if="!hasUploadImg2"
                                        >
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible2">
                                        <img width="100%" :src="dialogImageUrl2" alt="">
                                    </el-dialog>

                                    <div class="demo-image__preview" v-if="hasUploadImg2" @mouseenter="enterFun(2)" @mouseleave="leaveFun(2)">
                                        <el-image 
                                            style="width:100%;height:100%;color:#ccc;border-radius: 10px;border: 1px solid;"
                                            :src="dialogImageUrl2" 
                                            alt="图片加载失败"
                                            :preview-src-list="dialogImageUrlList2"
                                            >
                                        </el-image>
                                        <transition name="el-fade-in-linear">
                                            <span class="deleteMark" v-if="disabled2">
                                                <span
                                                    class=""
                                                    @click="handlePreview2"
                                                    >
                                                    <i class="el-icon-zoom-in"></i>
                                                </span>
                                                <span
                                                    class=""
                                                    @click="handleRemove2"
                                                    v-if="showDelete"
                                                    >
                                                    <i class="el-icon-delete"></i>
                                                </span>
                                            </span>
                                        </transition>
                                        
                                    </div>
                                </div>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="userName" class="worksItem" style="margin-bottom:0">
                            <div class="worksInput workImgDiv">
                               <div class="label"> <i></i><span class="title">机构简图</span> </div>
                                <div class="addImg" >
                                    <el-upload
                                        action="string"
                                        :http-request="uploadImg"
                                        accept="image/*"
                                        list-type="picture-card"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :on-success="uploadSuccess"
                                        v-if="!hasUploadImg"
                                        >
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>

                                    <div class="demo-image__preview" v-if="hasUploadImg" @mouseenter="enterFun(1)" @mouseleave="leaveFun(1)">
                                        <el-image 
                                            style="width:100%;height:100%;color:#ccc;border-radius: 10px;border: 1px solid;"
                                            :src="dialogImageUrl" 
                                            alt="图片加载失败"
                                            :preview-src-list="dialogImageUrlList"
                                            >
                                        </el-image>
                                        <transition name="el-fade-in-linear">
                                            <span class="deleteMark" v-if="disabled">
                                                <span
                                                    class=""
                                                    @click="handlePreview"
                                                    >
                                                    <i class="el-icon-zoom-in"></i>
                                                </span>
                                                <span
                                                    class=""
                                                    @click="handleRemove"
                                                    v-if="showDelete"
                                                    >
                                                    <i class="el-icon-delete"></i>
                                                </span>
                                            </span>
                                        </transition>
                                        
                                    </div>
                                    
                                </div>
                            </div>
                        </el-form-item>
                        
                    </el-form>
                </div>
            </div>
        </div>
        <div class="bottom wordsAddBottom">
            <div class="btn">
                <span class="v-btn" @click="saveAdd" v-if="this.detailType == 1" style="margin-right:40px;">确 定</span>
                <span class="v-btn active" style="margin-right:40px;" @click="resetForm" v-if="this.detailType == 1">重 置</span>
                <span class="v-btn active" @click="backPage">返 回</span>
            </div>
            
        </div>

        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
            <div style="width:100%;text-align:center;">
                <span style="font-size:16px;">修改机构信息后需重新审核,是否确认修改？</span>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button class="elBtn" type="primary" @click="saveUpdate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
       return{
           edit:false,
           index:0,
           worksId:"",
           form:{
                id:"",
                name:"",
                type:"",
                picture:"",
                cdhs:"",
                gjs:"",
                jhgx:"",
                ydlxs:"",
                rack:"",
                actuator:"",
                follower:"",
                decorate:"",
                zczxdwz:"",
                xdcc:"",
                cdhsdfdcx:"",
                cdhsdxxbf:"",
                jsdtx:"",
                xckdx:"",
                mscxdzs:"",
                zcdxknx:"",
                remarks:""

           },
           produceType:[],
           jigouParams:[],
           commonData:[],
           dialogVisible:false,
           dialogVisible2:false,
           centerDialogVisible:false,
           hasUploadImg:false,
           hasUploadImg2:false,
           dialogImageUrl:"",
           dialogImageUrlList:[],
           dialogImageUrl2:"",
           dialogImageUrlList2:[],
           detailType:1,
           disabled: false,
           disabled2: false,
           showDelete:true
       }
    },
    created(){
        // 初始化数据字典数据
        // 机构类型
        this.$common.selectDictByCode("TYPE",res => {
            if(res.data.success)this.produceType = res.data.data.list
        })
         
        // 机构参数
        this.$common.selectDictByCode("ALG",res => {
            if(res.data.success)this.jigouParams = res.data.data.list
        })

        // 获取修改时的作品id
        this.worksId = (this.$route.params.id && this.$route.params.id!=0)?this.$route.params.id:""
        this.detailType = this.$route.params.type?this.$route.params.type:""
        this.edit = (this.detailType == 1 || this.detailType == "undefined" || !this.detailType)?false:true
        this.showDelete = (this.detailType == 1 || this.detailType == "undefined" || !this.detailType)?true:false
        if(this.worksId){
            this.selectWorksById()
        }

    },
    methods:{
        // 自定义上传方式
        uploadImg(param){
            let uploadData = new FormData();
            uploadData.append('file', param.file);
            this.$api.uploadImg(uploadData).then(result => {
                if(result.data.success){
                    this.form.picture = result.data.data
                }
            });
        },
        uploadSuccess(response, file, fileList){
            this.form.picture = response.data
        },
        handlePictureCardPreview(file){
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handlePreview(){
            // this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleRemove(){
            // this.dialogImageUrl
            this.form.picture = ""
            this.dialogImageUrl = ""
            this.hasUploadImg = false
        },
        // 传动函数上传
        uploadImg2(param){
            let uploadData = new FormData();
            uploadData.append('file', param.file);
            this.$api.uploadImg(uploadData).then(result => {
                if(result.data.success){
                    this.form.remarks = result.data.data
                }
            });
        },
        uploadSuccess2(response, file, fileList){
            this.form.remarks = response.data
        },
        handleRemove2(){
            // this.dialogImageUrl
            this.form.remarks = ""
            this.dialogImageUrl2 = ""
            this.hasUploadImg2 = false
        },
        handlePictureCardPreview2(file){
            this.dialogImageUrl2 = file.url;
            this.dialogVisible2 = true;
        },
        handlePreview2(){
            // this.dialogImageUrl = file.url;
            this.dialogVisible2 = true;
        },
        enterFun(type){
            type == 1?(this.disabled = true):(this.disabled2 = true)
            
        },
        leaveFun(type){
            type == 1?(this.disabled = false):(this.disabled2 = false)
        },
       // 添加参数配置项
        addParams(){
            this.form.list.push({keyName:"",value:""})
        },
       // 删除动态的参数配置项
        removeParams(item,index){
            this.index = this.form.list.indexOf(item)
            if (index !== -1) {
                this.form.list.splice(index, 1)
            }
        },
        // 根据id查询作品
        selectWorksById(){
            this.$api.selectWorksById(this.worksId).then(result=>{
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.success){
                        _this.form = result.data.data
                        _this.hasUploadImg = result.data.data.picture?true:false
                        _this.hasUploadImg2 = result.data.data.remarks?true:false
                        // 机构简图
                        result.data.data.picture?_this.dialogImageUrlList.push(result.data.data.picture):""
                        _this.dialogImageUrl = result.data.data.picture
                        // 传动函数
                        result.data.data.remarks?_this.dialogImageUrlList2.push(result.data.data.remarks):""
                        _this.dialogImageUrl2 = result.data.data.remarks
                    }
                })
                
            })
        },
       // 保存作品数据
        saveAdd(){
            this.$refs['form'].validate((valid) => {
                if(valid){
                    if(!this.form.id){// 新增
                        this.$api.addWorks(this.form)
                        .then(result=>{
                            this.successFun(result)
                        })
                    }else{ // 修改
                        this.centerDialogVisible = true
                    }
                }
            })
            
        },
        saveUpdate(){
            this.form.state = 1
            this.$api.modifyWorks(this.form)
            .then(result=>{
                this.successFun(result)
            })
        },
        successFun(result){
            var _this = this
            this.$common.filterLogin(result,_this,()=>{
                if(result.data.success){
                    _this.$message({center: true,message:result.data.message?result.data.message:"操作成功",type: 'success'});
                    // 成功后返回列表页
                    _this.$router.push('/worksList')
                }else{
                    this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                }
            })
        },
       // 重置表单
        resetForm(){
            for(let item in this.form){
                this.form[item] = ""
            }
        },
        backPage(){
            if(this.detailType == 1){
                this.$router.push('/worksList')
            }else{
                this.$router.push('/programList')
            }
            
        }
    } 
}
</script>

<style lang="scss" scoped>
@import "../../../../css/select.css";
.el-textarea{
    width:60%;
    
}
.addContent{
    width: 100%;
    height: 93%;
    max-height: 100%;
    margin:auto;
    .topBox{
        position: relative;
        width: 100%;
        height:94%;
        margin:auto;
        margin-top:15px;
        margin-bottom: 10px;
        background: #fff;
        border: 2px solid #76383B;
        border-radius: 15px;
        .topContent{
            height: 100%;
            // align-items: center;
            padding-top: 20px;
        }
        .mainContentDiv{
            display: flex;
            position:relative;
            min-height: 20%;
            // padding-bottom: 15px;
            justify-content: center;
        }
        .worksItem{
            width: 45%;
        }
        .el-form-item{
            margin-bottom: 16px;
        }
        .worksInput{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            line-height: 40px;
            .label{
                display: flex;
                width: 50%;
                align-items: center;
            }
            .label>i{
                display: inline-block;
                width:20px;
                height: 20px;
                background: url('../../../../images/icon4.png') no-repeat;
                background-size: 100% 100%;
            }
            .label span.title{
                width: 150px;
                font-family: 'Microsoft Yahei';
                font-size: 14px;
                font-weight: 400;
                color:#7A3C40; 
                text-align: left;
                padding: 0 5px;
            }
            .el-select{
                width:50%;
                margin-left: 0;
            }
        }
        .baseInfo{
            display:flex;
            width: 100%;
            height: 95%;
            // padding:30px;
            padding-top:0;
            // padding-bottom: 30px;
            // padding-left: 30px;
            // padding-right: 30px;
            justify-content: center;
            // background: #000;
            overflow-y: auto;
            form{
                display: flex;
                width: 95%;
                flex-wrap: wrap;
                justify-content:space-around;
            }
            .leftInfo{
                width: 53%;
            }
            .rightInfo{
                width: 44%;
                height: 100%;
            }
            .addImg{
                display: flex;
                width: 50%;
                height: 85px;
                color: #7A3C40;
                justify-content: flex-start;
                align-items: center;
                // border:1px solid #7A3C40;
                margin-bottom: 10px;
                cursor: pointer;
                >div:first-child{
                    width:85px;
                    height: 100%;
                    overflow: hidden;
                }
                >div.el-dialog__wrapper{
                    width:100%;
                    height: 100%;
                    overflow: auto;
                }
                >div.demo-image__preview{
                    width:85px;
                    height: 85px;
                }
                // span{
                //     font-size: 30px;
                //     font-weight: normal;
                //     text-align: center;
                // }
            }
        }
        .bottomContent{
            // max-height: 90%;
            // align-items: none;
            // height:65%;
            .paramsConfig{
                // display: flex;
                width: 80%;
                height: 100%;
                max-height: 60%;
                // margin: auto;
                padding-top: 10px;
                // padding-bottom: 20px;
                // justify-content: center;
                // overflow: auto;
                .worksInput{
                    width:40%;
                }
                .paramsInput{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .common_input{
                        width:50%;
                    }
                    .v-btn{
                        font-size: 14px;
                        padding:2px 20px;
                        i{
                            font-weight: bold;
                        }
                    }
                }
            }
        }
        .v-icon{
            left:-4%;
            top:-5%;
        }
    }
    .bottom{
        display: flex;
        justify-content: center;
    }
}













// .addContent{
//     height: 90%;
//     margin-top: 15px;
//     .topBox{
//         display: flex;
//         height:90%;
//         justify-content: center;
//     }
//     .bottom{
//         display: flex;
//         justify-content: center;
//     }
//     .left{
//         display: flex;
//         width: 80%;
//         justify-content: center;
//         align-items: center;
//         .leftContent{
//             width: 100%;
//             height: 90%;
//             background: #fff;
//             border: 2px solid #76383B;
//             border-radius: 15px;
//             .mainContentDiv{
//                 display: flex;
//                 position:relative;
//                 min-height: 20%;
//                 padding-bottom: 15px;
//                 justify-content: center;
//                 align-items: center;
//             }
            
//         }
//     }
// }
</style>